import { ref } from 'vue'
import { debounce } from 'lodash'

export function useScrollTabs(step, context) {
    const tabActive = ref(0)
    const tabRect = ref()
    const tabRects = ref([])
    const isLeftmost = ref(true)
    const isRightmost = ref(false)
    const scrollStep = step || 150
    const scrollLeft = ref(0)

    const getTabRect = (id) => {
        // id，如：#tab-
        return new Promise((resolve) => {
            const query = context ? uni.createSelectorQuery().in(context) : uni.createSelectorQuery()
            query
                .select(`#${id}-scroll`)
                .boundingClientRect((res) => {
                    if (res) {
                        tabRect.value = res
                    }
                })
                .exec()

            query
                .selectAll(`.${id}-item`)
                .boundingClientRect((res) => {
                    if (res) {
                        tabRects.value = res
						resolve()
                    }
                })
                .exec()
        })
    }

    const scrollByLeft = () => {
        scrollLeft.value = Math.max(0, scrollLeft.value - scrollStep)
    }

    const scrollByRight = () => {
        scrollLeft.value = Math.max(0, scrollLeft.value + scrollStep)
    }

    const scrollToActive = async (id, index, gap = 0, subtract = 0) => {
        //  gap：可能有要减去的间距
        //  subtract：可能有要减去的额外宽度
        tabActive.value = index
        await getTabRect(id)
        scrollLeft.value = computeScroll(index, gap, subtract)
    }

    // 检测滚动位置
    const computeScroll = (index, gap, subtract) => {
        let targetScroll = 0
        for (let i = 0; i < index; i++) {
            targetScroll += tabRects.value[i].width + uni.rpx2px(gap)
        }
		const currentTabWidth = tabRects.value[index].width
        targetScroll =
            targetScroll -
            tabRect.value.width / 2 +
            currentTabWidth / 2 +
            uni.rpx2px(subtract)
        return Math.max(0, targetScroll)
    }

    const getContentInfo = (id) => {
        return new Promise((resolve) => {
            const query = uni.createSelectorQuery(instance.proxy)
            query
                .select(id)
                .boundingClientRect((res) => {
                    if (res) {
                        resolve(res)
                    }
                })
                .exec()
        })
    }

    const getScrollInfo = (id) => {
        return new Promise((resolve) => {
            const query = uni.createSelectorQuery(instance.proxy)
            query
                .select(id)
                .scrollOffset((res) => {
                    if (res) {
                        resolve(res)
                    }
                })
                .exec()
        })
    }

    const setScrollLeft = debounce((left) => {
        scrollLeft.value = Number(left)
    }, 300)

    const scroll = async (id) => {
        const res1 = await getScrollInfo(`${id}scroll`)
        const res2 = await getContentInfo(`${id}scroll`)

        setScrollLeft(res1.scrollLeft)

        if (res1.scrollLeft === 0) {
            isLeftmost.value = true
        } else {
            isLeftmost.value = false
        }

        if (res1.scrollLeft === res1.scrollWidth - res2.width) {
            isRightmost.value = true
        } else {
            isRightmost.value = false
        }
    }

    return {
        tabActive,
        scrollLeft,
        isLeftmost,
        isRightmost,
        scrollByLeft,
        scrollByRight,
        scrollToActive,
        scroll,
    }
}